<template>
	<div>
		welcome to home page
		<p>{{books}}</p>
		<p>{{id}}</p>
	</div>
</template>

<script>
	export default {
		name: 'Home',
		props: ['id'],
		data() {
			return {
				books: []
			}
		},
		beforeRouteEnter(to, from, next) {
			//动态路由除了第一次触发  剩余不触发
			console.log("beforeRouteEnter")
			next(vm => {
				vm.$.get("/books.json").then(res => {
					vm.books = res.data.books
				})
			})
		},
		beforeRouteUpdate(to, from, next) {
			//动态路由会触发
			console.log("beforeRouteUpdate")
			next()
		},
		beforeRouteLeave(to, from, next) {
			//动态路由不会触发
			if (confirm("即将离开当前组件")) {
				next() //继续传递
			} else {
				next(false) //取消传递
			}
			//这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消
		}
	}
</script>
